<script setup>
import { computed } from 'vue';
import { Descriptions, DescriptionsItem, Table, Tag } from 'ant-design-vue';

const props = defineProps({
  surfaceData: {
    type: Object,
    required: true
  },
  surfaceName: {
    type: String,
    required: true
  }
});

// 获取所有唯一的Delta值并排序
/** 已移除 allDeltas，改用 deltaLabels 基于名称的顺序渲染列 */
/** 计算需要展示的Delta标签顺序（固定为 P1, P10, P25, ATM, C25, C10, C1） */
const deltaOrder = ['P001', 'P1', 'P10', 'P25', 'ATM', 'C25', 'C10', 'C1', 'C001'];
const deltaLabels = computed(() => deltaOrder);

/** 构建三维表格的列定义（按预设Delta标签顺序动态生成列） */
const surfaceTableColumns = computed(() => {
  const columns = [
    {
      title: '期限(天)',
      dataIndex: 'term',
      key: 'term',
      width: 100,
      fixed: 'left',
      sorter: (a, b) => a.term - b.term
    }
  ];

  // 为每个Delta标签创建一列
  deltaLabels.value.forEach(label => {
    columns.push({
      title: label,
      key: `delta_${label}`,
      width: 100,
      align: 'center',
      customRender: ({ record }) => {
        const deltaData = record.deltaMap[label];
        return deltaData && typeof deltaData.value === 'number' ? `${deltaData.value.toFixed(2)}%` : '-';
      }
    });
  });

  return columns;
});

/** 构建表格数据源（以Delta名称作为映射键，兼容缺失字段场景） */
const surfaceTableData = computed(() => {
  const curves =
    props.surfaceData && Array.isArray(props.surfaceData.smileCurveList) ? props.surfaceData.smileCurveList : [];
  return curves.map(curve => {
    const deltaMap = {};
    // 兼容两种来源：优先使用数组 smileDeltaList，否则从对象 smileMap 转为数组
    let deltas = [];
    if (Array.isArray(curve && curve.smileDeltaList)) {
      deltas = curve.smileDeltaList;
    } else if (curve && curve.smileMap && typeof curve.smileMap === 'object') {
      deltas = Object.values(curve.smileMap);
    }

    deltas.forEach(deltaItem => {
      if (deltaItem && typeof deltaItem.name === 'string') {
        deltaMap[deltaItem.name] = deltaItem;
      }
    });

    const term = typeof curve.term === 'number' ? curve.term : 0;
    return {
      key: typeof curve.term === 'number' ? curve.term : `${curve.expiryDate || ''}-${Math.random()}`,
      term,
      expiryDate: curve.expiryDate || '-',
      deliveryDate: curve.deliveryDate || '-',
      smileType: curve.smileType || '-',
      wingRatio: typeof curve.wingRatio === 'number' ? curve.wingRatio : null,
      bidATM: typeof curve.bidATM === 'number' ? curve.bidATM : null,
      askATM: typeof curve.askATM === 'number' ? curve.askATM : null,
      deltaMap
    };
  });
});
</script>

<template>
  <div class="surface-detail">
    <!-- 曲面基本信息 -->
    <Descriptions title="曲面信息" :column="2" size="small" style="margin-bottom: 16px">
      <DescriptionsItem label="曲面名称">
        <Tag color="blue">{{ surfaceData.surfaceName }}</Tag>
      </DescriptionsItem>
      <DescriptionsItem label="货币对">
        <Tag color="green">{{ surfaceData.currencyPair }}</Tag>
      </DescriptionsItem>
    </Descriptions>

    <!-- 波动率曲面三维表格 -->
    <div>
      <h4>波动率曲面 (期限 × Delta)</h4>
      <div class="surface-table-container">
        <Table
          :columns="surfaceTableColumns"
          :data-source="surfaceTableData"
          :pagination="false"
          size="small"
          :scroll="{ x: Math.max(800, deltaLabels.length * 100 + 100) }"
          bordered
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'term'">
              <strong>{{ record.term }}天</strong>
            </template>
          </template>
        </Table>
      </div>

      <!-- 说明文字 -->
      <div class="table-description">
        <p><strong>说明：</strong></p>
        <ul>
          <li>纵轴表示不同期限的期权</li>
          <li>横轴按顺序：P1 P10 P25 ATM C25 C10 C1</li>
          <li>表格中的数值为对应期限和Delta下的波动率百分比</li>
          <li>'-' 表示该期限下没有对应Delta的数据</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.surface-detail {
  padding: 8px 0;
}

.surface-table-container {
  margin-bottom: 16px;
  border-radius: 6px;
  overflow: hidden;
}

.table-description {
  background: #f8f9fa;
  padding: 12px 16px;
  border-radius: 6px;
  margin-top: 16px;
}

.table-description p {
  margin: 0 0 8px 0;
  color: #333;
}

.table-description ul {
  margin: 0;
  padding-left: 20px;
}

.table-description li {
  margin-bottom: 4px;
  color: #666;
  font-size: 13px;
}

.dark .table-description {
  background: #1f1f1f;
}

.dark .table-description p {
  color: #ccc;
}

.dark .table-description li {
  color: #999;
}

h4 {
  margin-bottom: 16px;
  color: #333;
  font-weight: 600;
}

.dark h4 {
  color: #ccc;
}
</style>
